<template>
	<div>
		<el-dialog title="险种配置" :visible.sync="dialogVisible" size="large" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="off" :show-close="true" :top="dialog_margin_top">
		<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
				<el-form :inline="true">
				  	<el-col :span="24">
				  		<div class="grid-content bg-purple-dark"></div>
						<el-form-item lable="险种代码"  label-width="150px" :span="3">
							<el-input v-model="formData.riskcode" size="small" placeholder="险种代码"></el-input>
						</el-form-item>
						<el-form-item lable="险种名称" label-width="150px" :span="3">
							<el-input v-model="formData.riskcname" size="small" placeholder="险种名称"></el-input>
						</el-form-item>
						<el-form-item lable="是否有效" label-width="150px" :span="3">
							<el-select v-model="formData.validstatus" placeholder="是否有效" size="small">
								<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" @click="reset()">
								<i class="fa fa-undo"></i>
								重置
							</el-button>
						</el-form-item>
				  	</el-col>
					
					<el-form-item>
						<el-button size="small" type="warning" @click.native="openItemLink()"><i class="fa fa-link"></i> 关联标的</el-button>
					</el-form-item>
					<!-- <el-form-item>
						<el-button size="small" type="default" @click="">
							<i class="fa fa-search-plus"></i>
							查看日志
						</el-button>
					</el-form-item> -->
				</el-form>
			</el-col>

			<el-table :data="tableData" ref="multipleTable" v-loading="loading" element-loading-text="处理中......" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected" @row-click="toggleRow" @sort-change="orderBy">
			 	<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="riskcode" label="险种代码" sortable="custom" width="160"></el-table-column>
				<el-table-column prop="riskcname" label="险种中文名称" sortable="custom" show-overflow-tooltip min-width="240"></el-table-column>
				<el-table-column prop="riskename" label="险种英文名称" sortable="custom" show-overflow-tooltip min-width="240"></el-table-column>
				<el-table-column prop="salestartdate" label="生效日期" sortable="custom" width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="saleenddate" label="失效日期" sortable="custom" width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="validstatus" label="是否有效" sortable="custom" width="120" :formatter="validFormater"></el-table-column>
			</el-table>

			<div class="block" style="float:right">
			    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			      :current-page="formData.currentPage"
			      :page-sizes="[15, 30, 45]"
			      :page-size="formData.pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
			  </div>
		</el-dialog>
		<Item2Risk v-if="showItem2RiskDialog"></Item2Risk>
	</div>

</template>

<script>
import RiskAPI from "../../../../js/production/risk/riskAPI"
import dateUtil from "../../../../common/js/dateUtil"
import Utils from"../../../../js/production/utils";
import Item2Risk from"./Item2Risk";
export default {
  components : {
  	Item2Risk
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    riskcode: '',
	                    riskcname: '',
	                    validstatus: '',
	                    orderBy: '',
	                    order: '',
	                    selectedRows: [],
    		},
    		tableData: [],
    		total: 0,
		riskOptions: [],
		validOptions: [{
			label : '1-有效',
			value: '1'
		},{
			label : '0-无效',
			value: '0'
		}],
		isSortRequest: false,	//是否请求 
		showItemLinkDialog: false,
		showItem2RiskDialog: false,
		rowDetail: {},
		tableHeight: 0,
		dialogVisible: true,
		dialog_margin_top: '5%',
		loading : false,
	}
  },
  mounted() {
  	this.tableHeight = Utils.getScreenHeight()*0.6;
  	this.queryData();
  },
computed: {
  	selectedRows() {
  		return this.formData.selectedRows;
  	}
  },
  methods: {
		queryData() {
			RiskAPI.query(this);
		},
		rowSelected(rows,row) {
			this.formData.selectedRows = rows;
			this.rowDetail = row;
		},
		toggleRow(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		handleSizeChange(val) {
			this.formData.pageSize = val;
			this.queryData();
		},
		handleCurrentChange(val) {
			this.formData.currentPage = val;
			this.queryData();
		},
		dateFormater(row,  column) {  
			var  date  =  row[column.property];            
			if  (date  ==  undefined)  {               
				return  "";            
			}  
			return dateUtil.getDateyMd(date);
		},
		validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
		reset() {
			this.formData.riskcode = '';
			this.formData.riskcname = '';
			this.formData.validstatus = '';
			this.formData.currentPage = 1;
			this.queryData();
		},
		orderBy(column, prop, order) {
			if (typeof(column) != 'undefined') {
				this.formData.orderBy = column.prop;
				if (column.order == 'descending') {
					this.formData.order = 'desc';
				} else {
					this.formData.order = 'asc';
				}
			}
			if (this.isSortRequest) {
				this.isSortRequest = false;
				this.queryData();
			}
		},
		off() {
			this.$parent.showRiskLinkItemDialog = false;
		},
		openItemLink() {
			RiskAPI.openItemLinkDialog(this);
		}
  }
}
</script>